<template>
	<view class="root">
		<view class="header" @click="displayBottomBtn">
			<image style="width: 600rpx; height: 149rpx; background-color: transparent;" class="header_img" src="../../../static/header.jpg"></image>
		</view>
		<view class="box_middle" @click="displayBottomBtn">
			<view class="mid_head1">
				请收下绿色行程卡
			</view>
			<view class="mid_head2">
				2020***2022的动态行程卡
			</view>
			<view class="mid_head3">
				停止于: 2022.12.13 00:00:00
			</view>
			<view class="mid_img">
				<view class="mid_img_container">
					<image src="../../../static/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="mid_footer">
				<span class="mid_footer_title">您于2020-2022年到达或旅经:</span>
				<span class="mid_footer_value">{{ selectedCity }}</span>
			</view>
		</view>
		<view class="notification" @click="displayBottomBtn">
			12月13日0时起，正式下线"通信行程卡"服务
			<br>
			"通信行程卡"短信、网页、微信小程序、支付宝小程序、APP等所有渠道同步下线!
		</view>
		<view class="footer" @click="displayBottomBtn">
			<span class="footer_top">三年了，再见</span>
			<br>
			<span class="footer_bottom">jiangzhihao.com</span>
		</view>
		<view v-if="showBottomBtn" class="bottom_btn">
			<view class="screenshot" @click="notify">🚀 开始截图</view>
			<view class="back" @click="backSelectCity">重新填写</view>
			<view class="more" @click="showMore">关注我们</view>
		</view>
	</view>
</template>

<script>
	import Dialog  from 'vant/lib/dialog';
	export default {
		components: {
			'Dialog': Dialog
		},
		data() {
			return {
				showBottomBtn: true,
				selectedCity: ''
			}
		},
		onLoad(options) {
			let arr = options.city.split(',').map(item => {
				if(item.includes('直辖市')) {
					return item.substr(item.length - 3)
				} else {
					return item
				}
			})
			let str = ''
			for(let i = 0; i < arr.length; i++) {
				if(arr[i]) {
					str += arr[i]
					if(i < arr.length - 1) {
						str += ', '
					}
				}
			}
			this.selectedCity = str
		},
		methods: {
			notify() {
				Dialog.alert({
				  title: '温馨提示',
				  confirmButtonColor: "#1677FF",
				  message: '纪念版准备就绪，请自行截图保留；若页面太长，推荐使用手机截长图功能。',
				}).then(() => {
				  // on close
				});
				this.showBottomBtn = false
			},
			showMore() {
				Dialog.alert({
				  title: '温馨提示',
				  confirmButtonColor: "#1677FF",
				  message: '功能维护中',
				}).then(() => {
				  // on close
				  this.showBottomBtn = true
				});
			},
			backSelectCity() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			displayBottomBtn() {
				if(!this.showBottomBtn) {
					this.showBottomBtn = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.root {
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh);
		background-color: #2DA568;
		padding: 8% 10%;
		.box_middle {
			width: 100%;
			min-height: 400rpx;
			background-color: #fff;
			border-radius: 40rpx;
			.mid_head1 {
				height: 90rpx;
				line-height: 90rpx;
				color: #41a447;
				font-size: 32rpx;;
				font-weight: 700;
				background-image: url("../../../static/header1.png");
				background-size: 100% 90rpx;
				text-align: center;
			}
			.mid_head2 {
				color: #414141;
				font-size: 32rpx;
				font-weight: 700;
				text-align: center;
				margin: 20rpx auto;
			}
			.mid_head3 {
				color: #949494;
				font-size: 32rpx;
				font-weight: 700;
				text-align: center;
				margin: 10rpx auto;
			}
			.mid_img {
				width: 240rpx;
				height: 240rpx;
				margin: 36rpx auto;
				.mid_img_container {
					width: 240rpx;
					height: 240rpx;
					margin: 0 auto;
					animation-name: zoom;
					animation-duration: 1s;
					animation-timing-function: linear;
					animation-iteration-count: infinite;
					animation-direction: alternate;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			@keyframes zoom {
			  from  {
				  width: 240rpx;
				  height: 240rpx;
			  }
			  to {
				  width: 216rpx;
				  height: 216rpx;
			  }
			}
			.mid_footer {
				padding: 0 40rpx 40rpx 40rpx;
				font-size: 26rpx;
				font-weight: 700;
				.mid_footer_title {
					color: #909090;
					margin-right: 6rpx;
				}
				.mid_footer_value {
					line-height: 40rpx;
				}
			}	
		}
		
		.notification {
			line-height: 38rpx;
			font-size: 12rpx;
			color: #fff;
			text-align: center;
			margin-top: 46rpx;
		}
		
		.footer {
			position: relative;
			color: #fff;
			text-align: center;
			margin: 20px auto 15px;
			.footer_top {
				font-size: 26rpx;
			}
			.footer_top::before {
				position: absolute;
				top: 44rpx;
				left: 82rpx;
				content: "";
				width: 18%;
				height: 2rpx;
				background-color: #f5f5f5;
			}
			.footer_bottom {
				font-size: 24rpx;
			}
			.footer_bottom::after {
				position: absolute;
				top: 44rpx;
				left: 404rpx;
				content: "";
				width: 18%;
				height: 2rpx;
				background-color: #f5f5f5;
			}
		}
		
		.bottom_btn {
			position: fixed;
			right: 0;
			bottom: 160rpx;
			.screenshot {
				color: #fff;
				background-color: #ff976a;
				border: 1px solid #ff976a;
				padding: 4px 2px 4px 6px;
				border-radius: 30px 0 0 30px;
				margin-top: 6px;
				text-align: center;
			}
			.back {
				color: #323233;
				background-color: #fff;
				border: 1px solid #ebedf0;
				padding: 4px 2px 4px 6px;
				border-radius: 30px 0 0 30px;
				margin-top: 6px;
				text-align: center;
			}
			.more {
			color: #fff;
			    background-color: #00b578;
			    border: 1px solid #029d69;
			    padding: 4px 2px 4px 6px;
			    border-radius: 30px 0 0 30px;
			    margin-top: 6px;
			    text-align: center;
			}
		}
	}
</style>
